import React from 'react';
import { Layout, Avatar, Dropdown } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import Logo from '../assets/logo';
import styles from './HeaderNav.module.css';

const { Header } = Layout;

const HeaderNav: React.FC = () => {
  const navigate = useNavigate();

  const handleLogoClick = () => {
    navigate('/home');
  };

  const items = [
    {
      key: 'profile',
      label: '个人中心',
      icon: <UserOutlined />,
      onClick: () => navigate('/profile')
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: () => {
        navigate('/login');
      }
    }
  ];

  return (
    <Header className={styles.header}>
      <div className={styles.leftSection}>
        <div className={styles.logoSection} onClick={handleLogoClick} style={{ cursor: 'pointer' }}>
          <Logo />
          <div className={styles.titleSection}>
            <span className={styles.systemName}>档案监管系统</span>
          </div>
        </div>
      </div>
      <div className={styles.rightSection}>
        <Dropdown menu={{ items }} placement="bottomRight">
          <div className={styles.userDropdown}>
            <Avatar icon={<UserOutlined />} />
            <span className={styles.username}>管理员</span>
          </div>
        </Dropdown>
      </div>
    </Header>
  );
};

export default HeaderNav; 